<template>
    <div class="courtyard">
        <div class="courtyard-box">
            <!-- 导航 -->
            <div class="top-box">
                <div class="top-t">
                    <div class="t-img">
                        <img src="/src/assets/4-min.png" alt="">
                    </div>
                    <div class="nav">
                        <img class="fen" src="/src/assets/分类白.png" alt="">
                        <ul class="t-nav">
                            <li><router-link to="/">首页</router-link></li>
                            <li><router-link to="/about">院部简介</router-link></li>
                            <li><a href="#">办学特色</a></li>
                            <li><a href="#">专业介绍</a></li>
                            <li><a href="#">领导关怀</a></li>
                            <li><a href="#">对外交流</a></li>
                            <li><a href="#">社会服务</a></li>
                            <li><a href="#">师资力量</a></li>
                            <li><a href="#">实训中心</a></li>
                            <li><a href="#">实习基地</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 轮播图 -->
            <div class="swiper">
                <t-swiper class="tdesign-demo-block--swiper" :duration="300" :interval="2000">
                    <t-swiper-item v-for="item in 4" :key="item">
                        <div class="demo-item"><img src="/src/assets/banner.jpg" alt=""></div>
                    </t-swiper-item>
                </t-swiper>
            </div>
            <!-- 院部简介 -->
            <div class="content">
                <div class="content-box">
                    <div class="content-left">
                        <ul>
                            <li class="top1">快速导航<span class="span">Quick navigation</span></li>
                            <li><a href="">院部简介</a></li>
                        </ul>
                    </div>
                    <div class="content-right">
                        <div class="top">
                            <div class="top-left">
                                <img src="/src/assets/文件.png" alt="">
                                院部简介
                            </div>
                            <div class="top-right">
                                <div>
                                    当前所在位置：首页 | 院部简介
                                </div>
                                <div class="input">
                                    <input type="text" placeholder="输入关键词搜索">
                                    <img src="/src/assets/搜索.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="font">
                            <div class="img">
                                <a class="one"><img src="/src/assets/分类 (2).png" alt=""></a>
                                <a class="two"><img src="/src/assets/分类 (1).png" alt=""></a>
                                <a class="three"><img src="/src/assets/分类.png" alt=""></a>
                            </div>
                            <div class="font-content">
                                <div id="one">
                                    <!-- 图一 -->
                                    <div id="bottom1">
                                        <li>山东城院召开公文写作培训会</li>
                                        <div class="bottom2">
                                            <p>2021-10-19</p>
                                        </div>
                                    </div>
                                    <div id="bottom1">
                                        <li>关于报送2022年部门重点工作和日常工作的通知</li>
                                        <div class="bottom2">
                                            <p>2021-10-19</p>
                                        </div>
                                    </div>
                                    <div id="bottom1">
                                        <li>速读山东城院年度工作报告</li>
                                        <div class="bottom2">
                                            <p>2021-10-19</p>
                                        </div>
                                    </div>
                                    <div id="bottom1">
                                        <li>中国共产党山东省城市服务技师学院第一届委员会第五次全体会议公报</li>
                                        <div class="bottom2">
                                            <p>2021-10-19</p>
                                        </div>
                                    </div>
                                    <div id="bottom1">
                                        <li>山东城院召开2022年度工作会议</li>
                                        <div class="bottom2">
                                            <p>2021-10-19</p>
                                        </div>
                                    </div>
                                    <div id="bottom1">
                                        <li>关于召开3月份月度调度会的通知</li>
                                        <div class="bottom2">
                                            <p>2021-10-19</p>
                                        </div>
                                    </div>
                                </div>
                                <div id="two">
                                    <div class="two-top">
                                        <div class="two1">
                                            <div class="img1"><img src="/src/assets/5.png" alt="" /></div>
                                            <p>
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </p>
                                            <div class="once"></div>
                                            <div class="second">
                                                <div class="p"><img src="/src/assets/时钟1.png" alt="" />2022-02-17</div>
                                            </div>
                                        </div>
                                        <div class="two1">
                                            <div class="img1"><img src="/src/assets/5.png" alt="" /></div>
                                            <p>
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </p>
                                            <div class="once"></div>
                                            <div class="second">
                                                <div class="p"><img src="/src/assets/时钟1.png" alt="" />2022-02-17</div>
                                            </div>
                                        </div>
                                        <div class="two1">
                                            <div class="img1"><img src="/src/assets/5.png" alt="" /></div>
                                            <p>
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </p>
                                            <div class="once"></div>
                                            <div class="second">
                                                <div class="p"><img src="/src/assets/时钟1.png" alt="" />2022-02-17</div>
                                            </div>
                                        </div>
                                        <div class="two1">
                                            <div class="img1"><img src="/src/assets/5.png" alt="" /></div>
                                            <p>
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </p>
                                            <div class="once"></div>
                                            <div class="second">
                                                <div class="p"><img src="/src/assets/时钟1.png" alt="" />2022-02-17</div>
                                            </div>
                                        </div>
                                        <div class="two1">
                                            <div class="img1"><img src="/src/assets/5.png" alt="" /></div>
                                            <p>
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </p>
                                            <div class="once"></div>
                                            <div class="second">
                                                <div class="p"><img src="/src/assets/时钟1.png" alt="" />2022-02-17</div>
                                            </div>
                                        </div>
                                        <div class="two1">
                                            <div class="img1"><img src="/src/assets/5.png" alt="" /></div>
                                            <p>
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </p>
                                            <div class="once"></div>
                                            <div class="second">
                                                <div class="p"><img src="/src/assets/时钟1.png" alt="" />2022-02-17</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="three">
                                    <div class="three1">
                                        <div class="three-left">
                                            <img src="/src/assets/5.png" alt="">
                                        </div>
                                        <div class="three-right">
                                            <div class="three-top">
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </div>
                                            <div class="three-top three-none">
                                                新生开展“红色观影”
                                            </div>
                                            <div class="three-bottom">
                                                <img src="/src/assets/时钟1.png" alt="">
                                                <p>2019/06/28</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="three1">
                                        <div class="three-left">
                                            <img src="/src/assets/5.png" alt="">
                                        </div>
                                        <div class="three-right">
                                            <div class="three-top">
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </div>
                                            <div class="three-top three-none">
                                                新生开展“红色观影”
                                            </div>
                                            <div class="three-bottom">
                                                <img src="/src/assets/时钟1.png" alt="">
                                                <p>2019/06/28</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="three1">
                                        <div class="three-left">
                                            <img src="/src/assets/5.png" alt="">
                                        </div>
                                        <div class="three-right">
                                            <div class="three-top">
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </div>
                                            <div class="three-top three-none">
                                                新生开展“红色观影”
                                            </div>
                                            <div class="three-bottom">
                                                <img src="/src/assets/时钟1.png" alt="">
                                                <p>2019/06/28</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="three1">
                                        <div class="three-left">
                                            <img src="/src/assets/5.png" alt="">
                                        </div>
                                        <div class="three-right">
                                            <div class="three-top">
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </div>
                                            <div class="three-top three-none">
                                                新生开展“红色观影”
                                            </div>
                                            <div class="three-bottom">
                                                <img src="/src/assets/时钟1.png" alt="">
                                                <p>2019/06/28</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="three1">
                                        <div class="three-left">
                                            <img src="/src/assets/5.png" alt="">
                                        </div>
                                        <div class="three-right">
                                            <div class="three-top">
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </div>
                                            <div class="three-top three-none">
                                                新生开展“红色观影”
                                            </div>
                                            <div class="three-bottom">
                                                <img src="/src/assets/时钟1.png" alt="">
                                                <p>2019/06/28</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="three1">
                                        <div class="three-left">
                                            <img src="/src/assets/5.png" alt="">
                                        </div>
                                        <div class="three-right">
                                            <div class="three-top">
                                                热情迎世赛，一起向未来：山东城院启动世赛倒计时200天特色活动
                                            </div>
                                            <div class="three-top three-none">
                                                新生开展“红色观影”
                                            </div>
                                            <div class="three-bottom">
                                                <img src="/src/assets/时钟1.png" alt="">
                                                <p>2019/06/28</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="gengduo">
                                    查看更多&gt;
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部 -->
            <div class="foot">
                <div class="foot-box">
                    <div class="foot-top">
                        <div class="foot-left">
                            <img src="/src/assets/3-min.png" alt="">
                        </div>
                        <div class="foot-middle">
                            <table>
                                <tr>
                                    <td>办公室</td>
                                    <td>&nbsp;|&nbsp;&nbsp;0535-2246666</td>
                                </tr>
                                <tr>
                                    <td>招生咨询</td>
                                    <td>&nbsp;|&nbsp;&nbsp;0535-2246625</td>
                                </tr>
                                <tr>
                                    <td>官网</td>
                                    <td>&nbsp;|&nbsp;&nbsp;www.sdcc.edu.cn</td>
                                </tr>
                                <tr>
                                    <td>邮箱</td>
                                    <td>&nbsp;|&nbsp;&nbsp;sdccxy@126.com</td>
                                </tr>
                                <tr>
                                    <td>校址</td>
                                    <td>&nbsp;|&nbsp;&nbsp;山东省烟台市高新区海天路1001号</td>
                                </tr>
                            </table>
                        </div>
                        <div class="foot-right">
                            <div class="wx">
                                <img class="footcenter-right1" src="/src/assets/微信.png" />
                                <div>官方微信</div>
                            </div>
                            <div class="wb">
                                <img class="footcenter-right2" src="/src/assets/微博.png" />
                                <div>新浪微博</div>
                            </div>
                        </div>
                    </div>
                    <div class="foot-top1">
                        <div class="foot-img">
                            <img src="/src/assets/3-min.png" alt="">
                        </div>
                        <div class="foot-middle">
                            <div class="foot-m-left">
                                <div class="footcenter-left-1">联系我们</div>
                                <div class="footcenter-left-2">
                                    <table>
                                        <tr>
                                            <td>办公室</td>
                                            <td>&nbsp;:&nbsp;&nbsp;0535-2246666</td>
                                        </tr>
                                        <tr>
                                            <td>招生咨询</td>
                                            <td>&nbsp;:&nbsp;&nbsp;0535-2246625</td>
                                        </tr>
                                        <tr>
                                            <td>官网</td>
                                            <td>&nbsp;:&nbsp;&nbsp;www.sdcc.edu.cn</td>
                                        </tr>
                                        <tr>
                                            <td>邮箱</td>
                                            <td>&nbsp;:&nbsp;&nbsp;sdccxy@126.com</td>
                                        </tr>
                                        <tr>
                                            <td>校址</td>
                                            <td>&nbsp;:&nbsp;&nbsp;山东省烟台市高新区海天路1001号</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="foot-m-right">
                                <div><img src="/src/assets/二维码.jpg" alt=""></div>
                                <div>官方微信</div>
                            </div>
                        </div>
                    </div>
                    <div class="footbottom">Copyright 心山东省城市服务技师学院版权所有</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import { RouterLink } from "vue-router";

import $ from 'jquery';
$(function () {
    $('.one').click(function () {
        $('#one').show()
        $('#two').hide()
        $('#three').hide()
        console.log(123);
    });
    $('.two').click(function () {
        $('#one').hide()
        $('#two').show()
        $('#three').hide()
    });
    $('.three').click(function () {
        $('#one').hide()
        $('#two').hide()
        $('#three').show()
    })
})

$(function () {
    $('.nav').click(function () {
        $('.t-nav').toggle();
    });
});
</script>
<style lang="scss">
@media screen and (min-width: 968px) {
    * {
        margin: 0;
        padding: 0;
    }

    .courtyard {
        .courtyard-box {

            /*导航*/
            .top-box {
                background-color: rgba(0, 0, 0, 0.2);
                height: 70px;
                position: absolute;
                z-index: 999;
            }

            .top-t {
                width: 80%;
                margin: auto;
                display: flex;
                align-items: center;
                left: 13%;

                .t-img {
                    width: 20%;

                    img {
                        width: 100%;
                    }
                }

                .nav {
                    margin-left: 20px;

                    .fen {
                        display: none;
                    }

                    ul {
                        display: flex;
                        list-style: none;

                        li {
                            margin: 0 10px;

                            a {
                                text-decoration: none;
                                color: #fff;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }

            /*轮播图*/
            .swiper {
                .demo-item {
                    width: 100%;

                    img {
                        width: 100%;
                    }
                }
            }

            /*院部简介*/
            .content {
                background-color: #eef8fc;

                .content-box {
                    width: 90%;
                    margin: auto;
                    display: flex;
                    justify-content: space-between;

                    .content-left {
                        margin-top: -82px;
                        width: 15%;
                    }

                    .content-left ul {
                        list-style: none;
                        list-style-position: inside;
                        padding: 0;
                        margin: 0;
                        background-color: #fff;
                        border-radius: 10px;
                        position: sticky;
                        top: 10px;
                        overflow: hidden;
                        z-index: 10;

                        .top1 {
                            padding-left: 5px;
                            text-align: center;
                            height: 80px;
                            padding-top: 15px;
                            background-color: rgba($color: #005bac, $alpha: 0.8);
                            color: #fff;
                            font-size: 22px;

                            .span {
                                display: block;
                                font-size: 14px;
                            }
                        }

                        li {
                            text-align: center;
                            border-bottom: 3px solid #ededed;
                            margin-bottom: 20px;

                            // width: 90%;
                            // margin: auto;
                            // border: 1px solid red;
                            // padding-left: 5px;
                            a {
                                text-decoration: none;
                                display: block;
                                color: #3275b6;
                                // width: 100%;
                                height: 40px;
                                line-height: 40px;
                                // padding-left: 15px;

                                .span1 {
                                    margin-left: 70px;
                                    font-size: 20px;
                                }
                            }

                            a:hover {
                                font-size: 20px;
                                color: red;
                            }
                        }

                        li:nth-child(8) a {
                            border-bottom-left-radius: 10px;
                            border-bottom-right-radius: 10px;
                        }
                    }
                }

                .content-right {
                    width: 80%;
                    background-color: #fff;
                    margin-bottom: 120px;
                    padding-bottom: 20px;
                    border: 1px solid #e0e6e8;

                    .top {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: 20px;
                        border-bottom: 1px solid #c3c3c3;
                        height: 50px;

                        // padding: 5px;
                        .top-left {
                            font-size: 24px;
                            height: 100%;
                            line-height: 50px;
                            padding-left: 5px;
                            padding-right: 5px;
                            color: #0b5eae;

                            img {
                                width: 20px;
                                height: 20px;
                            }
                        }

                        .top-right {
                            display: flex;
                            align-items: center;
                            padding-right: 10px;
                            font-size: 14px;

                            img {
                                width: 20px;
                            }

                            .input {
                                display: flex;
                                align-items: center;
                                margin-left: 20px;

                                input {
                                    height: 20px;
                                    line-height: 20px;
                                    margin-right: 10px;
                                    text-align: center;
                                    border: 1px solid #f7f7f7;

                                }

                                input::placeholder {
                                    color: #cbcbcb;
                                }
                            }
                        }
                    }

                    .font {
                        .img {
                            text-align: right;
                            padding: 10px;

                            img {
                                width: 20px;
                                margin-right: 5px;
                            }

                            img:hover {
                                filter: drop-shadow(0 0 0 red);
                            }
                        }


                        .font-content {
                            padding: 10px;

                            // border: 1px solid red;
                            .gengduo {
                                text-align: center;
                                margin-top: 20px;
                                color: #b1b1b1;
                            }

                            #one:target {
                                display: block;
                            }

                            #two:target {
                                display: block;
                            }

                            #three:target {
                                display: block;
                            }

                            #one {
                                display: none;

                                #bottom1:hover {
                                    color: #c12e2a;
                                }

                                #bottom1 {
                                    // margin-top: 30px;
                                    height: 60px;
                                    line-height: 60px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    //font-size: 20px;
                                    border-bottom: 3px solid #dddddd;

                                    .bottom2 {
                                        padding-left: 10px;
                                        padding-right: 10px;
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;

                                        img {
                                            width: 20px;
                                            height: 20px;
                                            margin-right: 5px;
                                        }
                                    }
                                }
                            }

                            #two {
                                display: none;

                                .two-top {
                                    width: 95%;
                                    margin: auto;
                                    // float: left;
                                    display: flex;
                                    justify-content: space-between;
                                    flex-wrap: wrap;

                                    .two1 {
                                        width: 45%;
                                        margin-top: 20px;
                                        background-color: #f8f8f8;

                                        .img1 {
                                            height: 200px;
                                            width: 200px;
                                            margin: auto;
                                        }

                                        .once {
                                            width: 95%;
                                            margin: auto;
                                            border: 1px solid #ededed;
                                        }

                                        p {
                                            padding: 10px;
                                        }

                                        .second {
                                            text-align: right;
                                            // width: 150px;
                                            // margin-left: 280px;
                                            text-align: right;

                                            .p {
                                                display: flex;
                                                align-items: center;
                                                width: 90%;
                                                margin: auto;
                                                margin-top: 10px;
                                                margin-bottom: 10px;
                                                color: #8a8a8a;
                                                justify-content: right;

                                                img {
                                                    width: 20px;
                                                    height: 20px;
                                                }
                                            }
                                        }

                                        img {
                                            width: 100%;
                                            height: 200px;
                                        }
                                    }
                                }
                            }

                            #three {
                                display: none;

                                .three1 {
                                    padding: 10px;
                                    display: flex;
                                    align-items: center;

                                    .three-left {
                                        width: 30%;
                                        background-color: #f4f4f4;
                                        height: 150px;
                                        text-align: center;
                                        display: flex;
                                        align-items: center;

                                        img {
                                            width: 60%;
                                            clear: both;
                                            display: block;
                                            margin: auto;

                                        }
                                    }

                                    .three-right {
                                        border: 3px solid #f5f5f5;
                                        width: 100%;
                                        padding: 10px;
                                        background-color: #fff;
                                        margin-left: -20px;

                                        .three-none {
                                            display: none;
                                        }

                                        .three-top {
                                            //font-size: 20px;
                                            padding: 10px;
                                        }

                                        .three-bottom {
                                            display: flex;
                                            align-items: center;
                                            margin-top: 20px;
                                            padding: 10px;

                                            // border: 1px solid red;
                                            img {
                                                margin-right: 10px;
                                                height: 20px;
                                                width: 20px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            /*底部*/
            .foot {
                background-image: url(/src/assets/2-min.jpg);
                padding-top: 20px;

                .foot-box {
                    width: 85%;
                    margin: auto;

                    .foot-top1 {
                        display: none;
                    }

                    .foot-top {
                        display: flex;
                        justify-content: space-between;
                        border-bottom: 1px solid rgba(225, 225, 225, 0.6);
                        padding-bottom: 20px;

                        .foot-left {
                            width: 40%;
                            margin-top: 50px;

                            img {
                                width: 90%;
                                height: 68px;
                            }
                        }

                        .foot-middle {
                            width: 30%;
                            color: #fff;

                            table {
                                width: 100%;

                                tr {
                                    margin-bottom: 20px;

                                    td:nth-child(1) {
                                        width: 20%;
                                        text-align-last: justify;
                                        text-align: justify;
                                        text-justify: distribute-all-lines;
                                        padding-bottom: 10px;
                                    }

                                    td:nth-child(2) {
                                        width: 80%;
                                        padding-bottom: 10px;
                                    }
                                }
                            }
                        }

                        .foot-right {
                            width: 25%;
                            padding-top: 45px;
                            box-sizing: border-box;
                            display: flex;


                            .wx {
                                text-align: center;
                                margin-right: 20px;
                                color: #fff;

                                .footcenter-right1 {
                                    width: 40px;
                                    height: 40px;
                                }

                                div {
                                    font-size: 12px;
                                }
                            }

                            .wb {
                                text-align: center;
                                color: #fff;

                                .footcenter-right2 {
                                    width: 37px;
                                    height: 37px;
                                    margin-top: 3px;
                                }

                                div {
                                    font-size: 12px;
                                }
                            }
                        }
                    }

                    .footbottom {
                        margin-top: 10px;
                        color: rgba(255, 255, 255, 0.6);
                        text-align: center;
                        height: 40px;
                        line-height: 40px;
                        font-size: 13px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:968px) {
    * {
        margin: 0;
        padding: 0;
    }

    .courtyard {
        .courtyard-box {

            /*导航*/
            .top-box {
                width: 100%;
                background-color: rgba(0, 0, 0, 0.2);
                height: 50px;
                position: absolute;
                z-index: 999;

                .top-t {
                    width: 90%;
                    margin: auto;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    left: 10%;

                    .t-img {
                        margin-top: 5px;
                        width: 50%;

                        img {
                            width: 80%;
                            height: 44px;
                        }
                    }

                    .nav {
                        margin-left: 20px;
                        width: 30%;
                        position: relative;

                        .fen {
                            display: block;
                            width: 20%;
                            height: 20px;
                            margin-left: 50px;
                        }

                        ul {
                            position: absolute;
                            background-color: rgba($color: #000000, $alpha: 0.5);

                            li {
                                margin: 0 10px;
                                width: 70px;
                                text-align: center;

                                a {
                                    text-decoration: none;
                                    color: #fff;
                                    font-weight: bold;
                                    font-size: 10px;
                                }
                            }
                        }
                    }
                }
            }

            /*轮播图*/
            .swiper {
                .demo-item {
                    width: 100%;

                    img {
                        width: 100%;
                        height: 200px;
                    }
                }
            }

            // 内容开始
            .content {
                background-color: #f8fcff;

                .content-box {
                    width: 90%;
                    margin: auto;

                    .content-left {
                        display: none;
                    }

                    .content-right {

                        // display: flex;
                        .top {
                            padding: 10px;
                            border-bottom: 1px solid #d0dbec;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .top-left {
                                color: #005aab;
                                font-weight: bold;
                                font-size: 20px;

                                img {
                                    width: 20px;
                                    height: 20px;
                                }
                            }

                            .top-right {
                                font-size: 10px;
                                color: #727272;

                                .input {
                                    display: none;
                                }
                            }
                        }
                    }

                    .font {
                        .img {
                            display: flex;
                            justify-content: right;
                            padding: 10px;

                            img {
                                height: 16px;
                                width: 16px;
                                margin-left: 5px;
                            }

                            img:hover {
                                filter: drop-shadow(0 0 0 red);
                            }
                        }

                        .font-content {
                            .gengduo {
                                text-align: center;
                                margin-top: 20px;
                                color: #b1b1b1;
                            }

                            padding: 10px;
                            // border: 1px solid red;

                            #one {

                                #bottom1:hover {
                                    color: #c12e2a;
                                }

                                #bottom1 {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    font-size: 12px;
                                    border-bottom: 2px solid #dddddd;
                                    line-height: 40px;

                                    li {
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        width: 70%;
                                    }

                                    .bottom2 {
                                        margin-left: 10px;
                                        // padding-right: 10px;
                                        // display: flex;
                                        // justify-content: space-between;
                                        // align-items: center;

                                        img {
                                            width: 20px;
                                            height: 20px;
                                        }
                                    }
                                }
                            }

                            #two {
                                display: none;

                                .two-top {
                                    width: 95%;
                                    margin: auto;
                                    display: flex;
                                    justify-content: space-between;
                                    flex-wrap: wrap;

                                    .two1 {
                                        width: 100%;
                                        margin-top: 20px;
                                        background-color: #f8f8f8;

                                        .img1 {
                                            height: 200px;
                                            width: 200px;
                                            margin: auto;
                                            text-align: center;

                                            img {
                                                height: 100%;
                                                width: 80%;
                                                margin: auto;
                                                padding-top: 40px;
                                            }
                                        }

                                        .once {
                                            width: 95%;
                                            margin: auto;
                                            border: 1px solid #ededed;
                                        }

                                        p {
                                            padding: 10px;
                                        }

                                        .second {
                                            text-align: right;
                                            // border: 1px solid red;

                                            .p {
                                                display: flex;
                                                align-items: center;
                                                // margin-left: 10px;
                                                justify-content: right;
                                                padding-right: 20px;
                                                color: #bbbbbb;
                                                padding: 10px;

                                                img {
                                                    width: 20px;
                                                    height: 20px;
                                                }
                                            }
                                        }

                                        img {
                                            width: 100%;
                                            height: 200px;
                                        }
                                    }
                                }
                            }

                            #three {
                                display: none;

                                .three1 {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    margin-bottom: 20px;

                                    .three-left {
                                        width: 60%;
                                        height: 100px;
                                        text-align: center;
                                        background-color: #ecf0f3;

                                        img {
                                            width: 70%;
                                            height: 90%;
                                            padding-top: 20px;
                                        }
                                    }

                                    .three-right {
                                        // border: 1px solid #f6f7f8;
                                        background-color: #fff;
                                        margin-left: -10px;
                                        padding: 5px;

                                        .three-top {
                                            font-size: 14px;
                                        }

                                        .three-bottom {
                                            display: flex;
                                            justify-content: left;
                                            align-items: center;
                                            // padding: 10px;
                                            margin-top: 5px;
                                            margin-bottom: 5px;

                                            img {
                                                width: 20px;
                                                height: 20px;
                                            }

                                            p {
                                                font-size: 10px;
                                                color: #bdbdbd;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            //底部
            .foot {
                background-image: url(/src/assets/2-min.jpg);
                padding-top: 20px;

                .foot-box {
                    width: 90%;
                    margin: auto;

                    .foot-top {
                        display: none;
                    }

                    .foot-top1 {
                        border-bottom: 1px solid rgba(225, 225, 225, 0.6);

                        .foot-img {
                            text-align: left;

                            img {
                                width: 80%;
                                height: 42px;
                            }
                        }

                        .foot-middle {
                            margin-top: 20px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .foot-m-left {
                                width: 80%;
                                color: #fff;

                                .footcenter-left-1 {
                                    font-size: 16px;
                                    margin-bottom: 10px;
                                }

                                .footcenter-left-2 {
                                    width: 100%;

                                    table {
                                        width: 100%;

                                        tr {
                                            margin-bottom: 20px;

                                            td:nth-child(1) {
                                                width: 20%;
                                                text-align-last: justify;
                                                text-align: justify;
                                                text-justify: distribute-all-lines;
                                                padding-bottom: 10px;
                                                font-size: 12px;
                                            }

                                            td:nth-child(2) {
                                                padding-bottom: 10px;
                                                font-size: 12px;
                                            }
                                        }
                                    }
                                }
                            }

                            .foot-m-right {
                                width: 20%;

                                div:nth-child(1) {
                                    width: 100%;

                                    img {
                                        width: 100%;
                                        height: 72px;
                                    }
                                }

                                div:nth-child(2) {
                                    text-align: center;
                                    color: #fff;
                                    font-size: 12px;
                                }
                            }
                        }
                    }

                    .footbottom {
                        margin-top: 20px;
                        color: rgba(255, 255, 255, 0.6);
                        // background-color: rgba(0, 0, 0, 0.6);
                        text-align: center;
                        height: 30px;
                        line-height: 30px;
                        font-size: 13px;
                    }
                }
            }
        }
    }
}
</style>